// 引入 variables.scss 以使用全局变量
@import '@/styles/variables';

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-radius: 16px;
  background-color: #f0f7ff;
}

.leftBox {
  display: flex;
  flex-flow: column;

  .userBox {
    display: flex;
    align-items: center;
    margin-bottom: 8px;

    .userIcon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background-color: $primary-color;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: $font-size-base;
    }

    .userName {
      margin-left: 12px;
      font-weight: $font-weight-bold;
      font-size: $font-size-base;
      color: $title-color;
    }
  }

  .remaining {
    font-size: $font-size-tiny;
    color: $title-color;

    .date {
      font-weight: $font-weight-bold;
      color: $required-color;
    }
  }
}

.activationBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 32px;
  border: 2px solid $primary-color;
  border-radius: 200px;
  height: 56px;
  font-size: $font-size-base;
  color: $primary-color;
}